<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;800&display=swap" rel="stylesheet">
    <title>Cats</title>
</head>
<body>
<div class="banner-component">
    <div class="flex-items-center">
        <img src="./assets/clock-wise.svg" alt="version">
        <span class="left">
				Generated with CATS {{VERSION}}
			</span>
    </div>
    <div class="flex-items-center">
        <img src="./assets/clock.svg" alt="timestamp">
        <span>
				{{TIMESTAMP}}
			</span>
    </div>
</div>
<header>
    <div class="logo">
        <img class="logo-white" src="./assets/cats-logo-dark.svg" alt="White Logo">
        {{#JS}}
        <img class="logo-dark" src="./assets/cats-logo-white.svg" alt="Dark Logo">
        {{/JS}}
    </div>
    {{#JS}}
    <div class="theme-toggle">
        <button id="theme-toggle"  style="display: none;">
            <img class="theme-icon-light" src="./assets/white-mode-icon.svg" alt="Light Theme Icon">
            <img class="theme-icon-dark" src="./assets/dark-mode-icon.svg" alt="Dark Theme Icon">
        </button>
    </div>
    {{/JS}}
</header>
{{#TEST_CASE}}
<div class="page-body">
    <div class="page-container page-text">
        <a href="index.html" class="anchor-tag">All Tests</a>&nbsp&nbsp/&nbsp&nbsp{{testId}}
    </div>

    <div class="table-container">
        <div class="component title border-left-top">
            <p>Test Id</p>
        </div>
        <div class="component text border-right-top">
            <p>{{testId}}</p>
        </div>

        <div class="component title border-left-top">
            <p>Test Trace Id</p>
        </div>
        <div class="component text border-right-top">
            <p>{{traceId}}</p>
        </div>

        <div class="component title">
            <p>Timestamp</p>
        </div>
        <div class="component text">
            <p>{{request.timestamp}}</p>
        </div>

        <div class="component title">
            <p>Scenario</p>
        </div>
        <div class="component text">
            <p>{{scenario}}</p>
        </div>
        <div class="component title">
            <p>Expected Result</p>
        </div>
        <div class="component text">
            <p>{{expectedResult}}</p>
        </div>
        <div class="component title">
            <p>Result</p>
        </div>
        <div class="component text">
            <label class="test-result result-{{result}}">{{result}}</label>
        </div>
        <div class="component title">
            <p>Result Details</p>
        </div>
        <div class="component text">
            <p>
                {{{resultDetailsForHtml}}}
            </p>
        </div>
        {{#hasResultSwitched}}
            <div class="component title result-warn">
                <p>Warning</p>
            </div>
            <div class="component text result-warn">
                <p>
                    {{resultIgnoreDetails}}
                </p>
            </div>
        {{/hasResultSwitched}}
        <div class="component title">
            <p>Contract Path</p>
        </div>
        <div class="component text">
            <span class="rounded path details">{{contractPath}}</span>
        </div>

        <div class="component title">
            <p>Fuzzer</p>
        </div>
        <div class="component text">
            <p>{{fuzzer}}</p>
        </div>

        <div class="component title">
            <p>Full Request Path</p>
        </div>
        <div class="component text">
            <span class="rounded path details">{{fullRequestPath}}</span>
        </div>

        <div class="component title border-left-bottom">
            <p>Http Method</p>
        </div>
        <div class="component text border-right-bottom">
            <span class="active rounded rounded-{{httpMethod}} details">{{httpMethod}}</span>
        </div>
        <div class="clearfix"></div>
    </div>
    {{#hasRequestDetails}}
    {{#js}}
    <div>
        <div class="tabs">
            <div class="tabs-and-title">
                <div class="component section-title">Request Details</div>
                <div class="all-tabs">
                    <div class="component tab active" onclick="showCode(1)">Payload</div>
                    <div class="component tab" onclick="showCode(2)">Headers</div>
                    <div class="component tab" onclick="showCode(3)">cURL</div>
                </div>
            </div>
            <button class="copy-button" onclick="copyTabs()">Copy code</button>
        </div>
        <div class="code-area" id="code-1">
            <pre><code>{{requestJson}}</code></pre>
        </div>

        <div class="code-area active" id="code-2">
            <pre><code>{{headers}}</code></pre>
        </div>

        <div class="code-area" id="code-3">
            <pre><code>{{curl}}</code></pre>
        </div>
    </div>
    {{/js}}

    {{^js}}
    <div>
        <div class="tabs">
            <div class="tabs-and-title">
                <div class="component section-title">Request Details</div>
                <div class="all-tabs">
                    <div class="component tab active">Payload</div>
                </div>
            </div>
        </div>
        <div class="code-area active">
            <pre><code>{{requestJson}}</code></pre>
        </div>
        <div class="tabs">
            <div class="tabs-and-title">
                <div class="component section-title">Request Details</div>
                <div class="all-tabs">
                    <div class="component tab active">Headers</div>
                </div>
            </div>
        </div>
        <div class="code-area active">
            <pre><code>{{headers}}</code></pre>
        </div>
        <div class="tabs">
            <div class="tabs-and-title">
                <div class="component section-title">Request Details</div>
                <div class="all-tabs">
                    <div class="component tab active">cURL</div>
                </div>
            </div>
        </div>
        <div class="code-area active">
            <pre><code>{{curl}}</code></pre>
        </div>
    </div>
    {{/js}}
    <div class='section-response'>
        <div class="tabs-header">
            <div class="component section-title">Response</div>
            {{#js}}
            <button class="copy-button copy-button-response" onclick="copyResponse()">Copy code</button>
            {{/js}}
        </div>
        <div class="code-area-outside" id="code-response">
            <pre><code>{{responseJson}}</code></pre>
        </div>
    </div>

    <div>
        <div class="tabs-header">
            <div class="component section-title">CATS Replay</div>
            {{#js}}
            <button class="copy-button copy-button-cats-replay" onclick="copyCatsReplay()">Copy code</button>
            {{/js}}
        </div>
        <div class="code-area-outside" id="code-cats-replay">
            <pre><code>{{catsReplay}}</code></pre>
        </div>
    </div>
</div>
{{/hasRequestDetails}}
{{/TEST_CASE}}
{{#JS}}
<script src="script.js"></script>
<script>
    // Page scripts
    window.onload = function () {
        showCode(1);
    };
</script>
{{/JS}}
</body>

</html>